<template>
  <div class="wrap">
    <div class="left-box">
      <div id="showDataBar"
           style="width:100%;height:100%"></div>
    </div>
    <div class="box">
      <countup :start-val="1"
               :end-val="1008"
               :duration="2"
               tag="div"
               class="animation"></countup>
    </div>
    <div class="right-box">
      <div id="showDataPie"
           style="width:100%;height:100%"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allName: [],
      allRate: [],
      arriveNum: [],
      noArriveNum: [],
      comersSum: 0,
      timer: 0
    };
  },
  mounted() {
    this.showCACRate();
    setInterval(() => {
      this.$router.go(0);
    }, 300000);
    // if ("WebSocket" in window) {
    //   this.websocket = new WebSocket(
    //     "ws://localhost:8080/newcomersSystem/student/showCACRate?type=0"
    //   );
    //   this.initWebSocket();
    // } else {
    //   alert("当前浏览器 Not support websocket");
    // }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    // this.onbeforeunload();
  },
  methods: {
    drawBar() {
      let myChart = this.echarts.init(document.getElementById("showDataBar"));
      let option = {
        title: {
          text: "各学院报到率",
          textAlign: "center",
          left: "50%",
          top: "6%",
          textStyle: { color: "rgb(102, 102, 102)", fontSize: "32" }
        },
        grid: {
          containLabel: true,
          left: "8%",
          bottom: "10%",
          top: "15%",
          right: "8%"
        },
        xAxis: {
          type: "value",
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
          axisLabel: {
            interval: 0,
            fontSize: 16
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: this.allName,
          axisLabel: {
            interval: 0,
            rotate: 0,
            textStyle: {
              fontSize: 20
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: 30,
            barGap: "80%",
            itemStyle: {
              normal: {
                color: function(params) {
                  let index = params.dataIndex;
                  let colorList = ["#2a5caa", "#37A2DA"];
                  if (index % 2 == 0) {
                    return colorList[0];
                  } else {
                    return colorList[1];
                  }
                }
              }
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c} %",
                fontSize: 18
              }
            },
            data: this.allRate
          }
        ]
      };
      myChart.setOption(option);
      let autoWidth = 30;
      let autoHeight = 100;
      myChart.getDom().style.width = autoWidth + "vw";
      myChart.getDom().style.height = autoHeight + "vh";
      myChart.getDom().childNodes[0].style.width = autoWidth + "vw";
      myChart.getDom().childNodes[0].style.height = autoHeight + "vh";
      myChart.resize();
    },
    drawPie() {
      let myChart = this.echarts.init(document.getElementById("showDataPie"));
      let pieData1 = [];
      let pieData2 = [];
      for (let i = 0; i < this.allName.length; i++) {
        let pie_data1 = {};
        let pie_data2 = {};
        pie_data1.name = pie_data2.name = this.allName[i];
        pie_data1.value = this.arriveNum[i];
        pie_data2.value = this.noArriveNum[i];
        pieData1.push(pie_data1);
        pieData2.push(pie_data2);
      }
      let option = {
        title: [
          {
            text: "各学院报到人数占比",
            textAlign: "center",
            left: "50%",
            top: "44%",
            textStyle: { color: "rgb(102, 102, 102)", fontSize: "24" }
          },
          {
            text: "各学院未报到人数占比",
            textAlign: "center",
            left: "50%",
            top: "51%",
            textStyle: { color: "rgb(102, 102, 102)", fontSize: "24" }
          }
        ],
        series: [
          {
            type: "pie",
            radius: [25, 110],
            center: ["50%", "22%"],
            roseType: "area",
            label: {
              fontSize: 20
            },
            labelLine: { length: 5 },
            data: pieData1
          },
          {
            type: "pie",
            radius: [25, 110],
            center: ["50%", "77%"],
            roseType: "area",
            label: {
              fontSize: 20
            },
            labelLine: { length: 5 },
            data: pieData2
          }
        ]
      };
      myChart.setOption(option);
      let autoWidth = 32;
      let autoHeight = 100;
      myChart.getDom().style.width = autoWidth + "vw";
      myChart.getDom().style.height = autoHeight + "vh";
      myChart.getDom().childNodes[0].style.width = autoWidth + "vw";
      myChart.getDom().childNodes[0].style.height = autoHeight + "vh";
      myChart.resize();
    },
    // 请求报到率
    showCACRate() {
      this.axios({
        method: "get",
        url: "/student/showCACRate",
        params: {
          type: 0
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            this.allName = [];
            this.allRate = [];
            this.arriveNum = [];
            this.noArriveNum = [];
            for (let i = 0; i < res.data.result.length; i++) {
              this.allName.push(
                "(" +
                  (res.data.result.length - i) +
                  ")" +
                  res.data.result[i].name
              );
              this.allRate.push(res.data.result[i].rate);
              this.arriveNum.push(res.data.result[i].arriveNum);
              this.noArriveNum.push(
                res.data.result[i].allNum - res.data.result[i].arriveNum
              );
            }
            this.getAllStatus();
            this.drawBar();
            this.drawPie();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 请求报到人数
    getAllStatus() {
      this.axios({
        method: "get",
        url: "/student/getAllStatus"
      })
        .then(res => {
          if (res.data.code === 0) {
            this.comersSum = res.data.result.comersSum;
          }
          this.timer = setTimeout(this.showCACRate, 15000);
        })
        .catch(error => {
          console.log(error);
        });
    }
    // initWebSocket() {
    //   //连接错误
    //   this.websocket.onerror = this.setErrorMessage;
    //   //连接成功
    //   this.websocket.onopen = this.setOnopenMessage;
    //   //收到消息的回调
    //   this.websocket.onmessage = this.setOnmessageMessage;
    //   //连接关闭的回调
    //   this.websocket.onclose = this.setOncloseMessage;
    //   //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    //   window.onbeforeunload = this.onbeforeunload;
    // },
    // setErrorMessage() {
    //   this.data =
    //     "WebSocket连接发生错误" + "   状态码：" + this.websocket.readyState;
    // },
    // setOnopenMessage() {
    //   this.data =
    //     "WebSocket连接成功" + "   状态码：" + this.websocket.readyState;
    // },
    // setOnmessageMessage(event) {
    //   this.data = "服务端返回：" + event.data;
    // },
    // setOncloseMessage() {
    //   this.data =
    //     "WebSocket连接关闭" + "   状态码：" + this.websocket.readyState;
    // },
    // onbeforeunload() {
    //   this.closeWebSocket();
    // },
    // //websocket发送消息
    // send() {
    //   this.websocket.send(this.text);
    //   this.text = "";
    // },
    // closeWebSocket() {
    //   this.websocket.close();
    // }
  }
};
</script>

<style scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  background: #fff;
}
.left-box,
.right-box {
  width: 30vw;
  height: 100vh;
  float: left;
}
.right-box {
  width: 32vw;
  float: right;
}
.box {
  width: 37vw;
  height: 30vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.animation {
  font-size: 12vw;
  font-style: italic;
  color: #04be02;
  text-align: center;
  letter-spacing: 1vw;
}
.number {
  margin: auto;
}
.code-box {
  width: 15vw;
  margin: auto;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
p {
  color: #555;
  font-weight: bold;
  font-style: italic;
  font-size: 1vw;
  margin-bottom: 1vh;
}
.code-img {
  width: 10vw;
  vertical-align: bottom;
}
.number-box {
  position: fixed;
  margin: auto;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.number-img {
  width: 40vw;
}
</style>